@import "variables.less";
@import "mixins.less";

@bselectItemPadding: 5px 20px 5px 15px;

// Root element styles
// --------------------------------

.bselect {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	margin-top: -16px;
	margin-bottom: 20px;
	&, input, button {
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
	}

	&.open .bselect-caret {
		background-image: none;
		#bselect-mixins > .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
	}

	&.disabled {
		#bselect-mixins > .opacity(65);
	}
}

// Label/caret
// --------------------------------

// Label and caret have basically the same styles
.bselect-label,
.bselect-caret {
	position: relative;
	display: inline-block;
	height: @baseLineHeight;
	color: @fontColor;
	font-size: @baseFontSize;
	line-height: @baseLineHeight;
	*line-height: @baseLineHeight;
	#bselect-mixins > .vertical-gradient(@btnBackground, @btnBackgroundHighlight);
	border: 1px solid @btnBorder;
	*border: 0; // Remove the border to prevent IE7's black border on input:focus
	border-bottom-color: darken(@btnBorder, 10%);
	cursor: pointer;
	vertical-align: middle;

	&:hover {
		background-position: 0 -15px;
		background-color: darken(@bgColor, 10%);
		*background-color: darken(@bgColor, 15%); /* Buttons in IE7 don't get borders, so darken on hover */

		#bselect-mixins > .transition(background-position .1s linear);
	}
}

.bselect-label {
	padding: 4px 12px;
	overflow: hidden;
	#bselect-mixins > .border-radius(@baseBorderRadius 0 0 @baseBorderRadius);
}

.bselect-caret {
	margin-left: -1px;
	padding: 4px 5px;
	#bselect-mixins > .border-radius(0 @baseBorderRadius @baseBorderRadius 0);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;

	> .caret {
		display: inline-block;
		width: 0;
		height: 0;
		margin: 20px 10px;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 4px solid @grayDark;
		content: "";
		vertical-align: top;
	}
}

// Styles for the disabled bselect
.bselect.disabled .bselect-label,
.bselect.disabled .bselect-caret {
	background-image: none;
	cursor: not-allowed;
	#bselect-mixins > .transition(none);
	#bselect-mixins > .box-shadow(none);

	&:hover {
		background-color: mix(@btnBackground, @btnBackgroundHighlight, 60%);
	}
}

// Dropdown
// --------------------------------
.bselect-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: @zindexDropdown;
	display: none;
	width: 97%;
	margin: 2px 0 0;
	padding: 5px 1.5%;
	background-color: @dropdownBackground;
	border: 1px solid fade(@dropdownBorder, 100%);
	border: 1px solid @dropdownBorder;
	#bselect-mixins > .border-radius(@baseBorderRadius);
	#bselect-mixins > .box-shadow(0 5px 10px rgba(0,0,0,.2));
}

.bselect-search {
	margin-bottom: @baseLineHeight / 2;
	vertical-align: middle;
	white-space: nowrap;

	> .bselect-search-input,
	> .bselect-search-icon {
		display: inline-block;
		height: @baseLineHeight;
		vertical-align: middle;
	}

	> .bselect-search-input {
		position: relative;
		padding: 4px 6px;
		margin: 0;
		background: @inputBackground;
		border: 1px solid @inputBorder;
		cursor: text;
		#bselect-mixins > .border-radius(@baseBorderRadius 0 0 @baseBorderRadius);
		#bselect-mixins > .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));

		// Make input on top when focused so blue border and shadow always show
		&:focus {
			z-index: 2;
		}
	}

	> .bselect-search-icon {
		width: auto;
		margin-left: -1px;
		padding: 4px 5px;
		text-align: center;
		text-shadow: 0 1px 0 @white;
		background-color: @grayLighter;
		border: 1px solid #ccc;
		#bselect-mixins > .border-radius(0 @baseBorderRadius @baseBorderRadius 0);
	}
}

.bselect-message {
	display: none;
	padding: @bselectItemPadding;
	line-height: @baseLineHeight;
	cursor: default;
}

.bselect-option-list {
	line-height: @baseLineHeight;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overflow-x: hidden;
}

// Dropdown items
// --------------------------------
.bselect-option {
	> a {
		display: block;
		padding: @bselectItemPadding;
		color: @fontColor;
		text-decoration: none;
		white-space: normal;
	}

	&.grouped {
		// Should have this extra padding, to visually indicate that it's grouped
		padding-left: 15px;
	}

	&:focus {
		outline: 0; // No outline directly in the LI
	}

	&:focus a {
		outline: thin dotted #333;
		outline-offset: -2px;
	}

	&:focus a,
	a:focus,
	a:hover {
		color: @dropdownLinkColorHover;
		text-shadow: 0 1px 0 rgba(100, 100, 100, 0.5);
		#bselect-mixins > .vertical-gradient(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
	}

	&.active > a,
	&.active > a:hover {
		color: @dropdownLinkColorActive;
		#bselect-mixins > .vertical-gradient(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
	}
}

.bselect-option-group {
	padding: @bselectItemPadding;
	font-weight: bold;
	cursor: default;
	white-space: normal;
}


// Sizes
// --------------------------------

// Mini
.bselect.bselect-mini {
	.bselect-label,
	.bselect-caret {
		padding: @paddingMini;
		font-size: @fontSizeMini;
	}

	.bselect-caret {
		padding-left: 5px;
		padding-right: 5px;
	}
}

// Small
.bselect.bselect-small {
	.bselect-label,
	.bselect-caret {
		padding: @paddingSmall;
		font-size: @fontSizeSmall;
	}

	.bselect-caret {
		padding-left: 5px;
		padding-right: 5px;
	}
}

// Large
.bselect.bselect-large {
	.bselect-label,
	.bselect-caret {
		padding: @paddingLarge;
		font-size: @fontSizeLarge;
	}

	.bselect-caret {
		padding-left: 12px;
		padding-right: 12px;
	}

	.bselect-caret .caret {
		border-left-width:  5px;
		border-right-width: 5px;
		border-top-width:   5px;
	}
}

// Shared styles across all sizes
.bselect {
	&.bselect-mini,
	&.bselect-small,
	&.bselect-large {
		margin-top: 6px;
	}
}

// Utils
// --------------------------------
.bselect-inaccessible {
	position: relative !important;
	top: -9999em !important;
	left: -9999em !important;
	clip: rect(0, 0, 0, 0) !important;
	display: block !important;
	visibility: hidden !important;
	min-height: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
}